 /*!
  * Thumbnail helper for fancyBox
  * version: 1.0.7 (Mon, 01 Oct 2012)
  * @requires fancyBox v2.0 or later
  *
  * Usage:
  *     $(".fancybox").fancybox({
  *         helpers : {
  *             thumbs: {
  *                 width  : 50,
  *                 height : 50
  *             }
  *         }
  *     });
  *
  */
 module.exports = function($) {
     //Shortcut for fancyBox object
     var F = $.fancybox;

     //Add helper object
     F.helpers.thumbs = {
         defaults: {
             width: 50, // thumbnail width
             height: 50, // thumbnail height
             position: 'bottom', // 'top' or 'bottom'
             source: function(item) { // function to obtain the URL of the thumbnail image
                 var href;

                 if (item.element) {
                     href = $(item.element).find('img').attr('src');
                 }

                 if (!href && item.type === 'image' && item.href) {
                     href = item.href;
                 }

                 return href;
             }
         },

         wrap: null,
         list: null,
         width: 0,

         init: function(opts, obj) {
             var that = this,
                 list,
                 thumbWidth = opts.width,
                 thumbHeight = opts.height,
                 thumbSource = opts.source;

             //Build list structure
             list = '';

             for (var n = 0; n < obj.group.length; n++) {
                 list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
             }

             this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
             this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);

             //Load each thumbnail
             $.each(obj.group, function(i) {
                 var el = obj.group[i],
                     href = thumbSource(el);

                 if (!href) {
                     return;
                 }

                 $("<img />").load(function() {
                         var width = this.width,
                             height = this.height,
                             widthRatio, heightRatio, parent;

                         if (!that.list || !width || !height) {
                             return;
                         }

                         //Calculate thumbnail width/height and center it
                         widthRatio = width / thumbWidth;
                         heightRatio = height / thumbHeight;

                         parent = that.list.children().eq(i).find('a');

                         if (widthRatio >= 1 && heightRatio >= 1) {
                             if (widthRatio > heightRatio) {
                                 width = Math.floor(width / heightRatio);
                                 height = thumbHeight;

                             } else {
                                 width = thumbWidth;
                                 height = Math.floor(height / widthRatio);
                             }
                         }

                         $(this).css({
                             width: width,
                             height: height,
                             top: Math.floor(thumbHeight / 2 - height / 2),
                             left: Math.floor(thumbWidth / 2 - width / 2)
                         });

                         parent.width(thumbWidth).height(thumbHeight);

                         $(this).hide().appendTo(parent).fadeIn(300);

                     })
                     .attr('src', href)
                     .attr('title', el.title);
             });

             //Set initial width
             this.width = this.list.children().eq(0).outerWidth(true);

             this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
         },

         beforeLoad: function(opts, obj) {
             //Remove self if gallery do not have at least two items
             if (obj.group.length < 2) {
                 obj.helpers.thumbs = false;

                 return;
             }

             //Increase bottom margin to give space for thumbs
             obj.margin[opts.position === 'top' ? 0 : 2] += ((opts.height) + 15);
         },

         afterShow: function(opts, obj) {
             //Check if exists and create or update list
             if (this.list) {
                 this.onUpdate(opts, obj);

             } else {
                 this.init(opts, obj);
             }

             //Set active element
             this.list.children().removeClass('active').eq(obj.index).addClass('active');
         },

         //Center list
         onUpdate: function(opts, obj) {
             if (this.list) {
                 this.list.stop(true).animate({
                     'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
                 }, 150);
             }
         },

         beforeClose: function() {
             if (this.wrap) {
                 this.wrap.remove();
             }

             this.wrap = null;
             this.list = null;
             this.width = 0;
         }
     }
 }
